<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>基于 layui 的极简社区页面模版</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="keywords" content="fly,layui,前端社区">
		<meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
		<link rel="stylesheet" href="../res/layui/css/layui.css">
		<link rel="stylesheet" href="../res/css/global.css">
		<link rel="stylesheet" href="../layer/mobile/need/layer.css" />
		<script type="text/javascript" src="../layer/layer.js"></script>
		<script type="text/javascript" src="../res/js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="../res/js/vue.js"></script>
		<style type="text/css">
			.fly-avatar img {
				width: 60px;
				height: 60px;
				border-radius: 100%;
			}
			/*隐藏滚动条*/
			
			body {
				background: #ffffff;
				overflow-x: hidden;
				overflow-y: hidden;
			}
			
			.fly-list li {
				height: 100%;
				margin-top: 10px;
			}
			
			.fly-list-info {
				margin-left: 16px;
			}
			
			.fly-list li h2 {
				margin-left: 85px;
				margin-top: 9px;
			}
			
			.fly-list li h2 a {
				padding-top: 15px;
				margin-top: 10px;
			}
			
			.layui-textarea {
				min-height: 20px;
				width: 90%;
				margin-left: 10px;
				margin-bottom: 10px;
			}
			
			.fly-column .layui-container .layui-clear li a {
				font-size: 22px;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div class="fly-panel fly-column" id="mainid">
			<div class="layui-container">
				<ul class="layui-clear">
					<li v-for="(item,index) in tabdata"@click="dongtai($event,index)">
						<a >{{item.name}}</a>
					</li>
				</ul>

			</div>
		</div>
		<script>
			//class="layui-hide-xs layui-this"
			//各种tab的点击事件

			/*用vue的形式进行处理*/
			//第一步，创建vue的对象
			var homedata = {
				guigeSpan: -1, //控制点亮状态 -1为默认不点亮
				kouweiSpan: -1, //控制点亮状态
				isActive: true,
				error: null,
				// v-bind:class="titles" 
				 titles:'layui-hide-xs layui-this',
				tabdata: [{
					"id": 1,
					"name": "动态"
				}, {
					"id": 2,
					"name": "分享"
				}, {
					"id": 3,
					"name": "笑话"
				}, {
					"id": 4,
					"name": "消息"
				}, ]
			}
			var homeapp = new Vue({
				el: "#mainid",
				data: homedata,
				created: function() {
					//创建vue
					//this.homedata.guigeSpan=0;
					this.$options.methods.initdata(this)
					//console.log("222")
					console.log($(".layui-container .layui-clear").children("li").eq(0));
					$(".layui-container .layui-clear").children("li").eq(0).addClass("layui-hide-xs layui-this");
					
				},
				methods: { //vue实现各种方法
					//tab1的点击事件
					//初始化数据集
					initdata: function(that) {
						homedata.guigeSpan = 0
					},
					dongtai: function(e, index) {
						alert(index);
						var that = e.currentTarget;
					},

				}
			});
		</script>
	</body>

</html>